<template>
  <div class="app-container">
    <PropTable
      ref="tableData"
      :loading="loading"
      :columns="column"
      :data="data"
      @reset="reset"
      @onSubmit="onSubmit"
      :unadd="false"
    >
      <template v-slot:operation="scope">
        <el-button type="primary" size="small" icon="View" @click="openPro(scope.row)">
          项目详情
        </el-button>
      </template>
    </PropTable>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import PropTable from '@/components/Table/PropTable/index.vue'
  import { postCollectionParticularSearch } from '@/api/controller/collection-particular-controller/index'
  import { postPaymentParticularSearch } from '@/api/controller/payment-particular-controller/index'
  import { useRouter } from 'vue-router'
  const pageInfo = ref({})
  const tableData = ref<any>([])
  const loading = ref(true)
  const column = ref([
    {
      label: '合同类型',
      inSearch: true,
      valueType: 'select',
      itemIf: true,
      name: 'contractType',
      options: [
        { value: '0', label: '采购合同' },
        { value: '1', label: '销售合同' },
      ],
    },
    { name: 'paymentDate', label: '付款日期', itemIf: true, valueType: 'input' },
    { name: 'amount', label: '付款金额(元)', itemIf: true, valueType: 'input', moneyType: true },
    { name: 'paymentType', label: '付款方式', itemIf: true, valueType: 'input' },
    { name: 'collectionDate', label: '收款日期', itemIf: true, valueType: 'input' },
    { name: 'amount', label: '收款金额(元)', itemIf: true, valueType: 'input', moneyType: true },
    { name: 'collectionType', label: '收款方式', itemIf: true, valueType: 'input' },
    { name: 'pointInfo', label: '节点', itemIf: true, width: '250' },
    { name: 'projectBrief', label: '项目简称', inSearch: true, valueType: 'input' },
    { name: 'contractName', label: '合同名称', inSearch: true, valueType: 'input' },
    { name: 'remark', label: '备注', valueType: 'input' },
    { name: 'operation', slot: true, fixed: 'right', width: 120, label: '操作', type: false },
  ])
  const data = ref(null)
  const loadData = async (val) => {
    let res
    if (val.contractType === '1') {
      res = await postCollectionParticularSearch(val)
      data.value = res.data
      data.value.list.forEach((item) => (item.contractType = '1'))
      tableData.value.formInline.contractType = '1'
      column.value[1].itemIf = true
      column.value[2].itemIf = true
      column.value[3].itemIf = true
      column.value[4].itemIf = false
      column.value[5].itemIf = false
      column.value[6].itemIf = false
    } else {
      res = await postPaymentParticularSearch(val)
      data.value = res.data
      data.value.list.forEach((item) => (item.contractType = '0'))
      tableData.value.formInline.contractType = '0'
      column.value[1].itemIf = false
      column.value[2].itemIf = false
      column.value[3].itemIf = false
      column.value[4].itemIf = true
      column.value[5].itemIf = true
      column.value[6].itemIf = true
    }
  }

  const router = useRouter()
  const openPro = (row) => {
    router.push({
      name: 'projectInfo',
      state: { id: row.projectId },
    })
  }
  //重置搜索条件
  const reset = async () => {
    try {
      loading.value = true
      pageInfo.value = {
        pageNum: 1,
        pageSize: 15,
      }
      await loadData(pageInfo.value)
    } finally {
      loading.value = false
    }
  }
  //搜索
  const onSubmit = async (val) => {
    try {
      loading.value = true
      await loadData(val)
    } finally {
      loading.value = false
    }
  }
  //初始化
  onMounted(async () => {
    try {
      loading.value = true
      pageInfo.value = {
        pageNum: 1,
        pageSize: 15,
      }
      await loadData(pageInfo.value)
    } finally {
      loading.value = false
    }
  })
</script>

<style lang="scss" scoped>
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
</style>
